// @Author: vxhly
// @Date:   2018-01-20 01:12:51 pm
// @Email:  pengchengou@gmail.com
// @Last modified by:   vxhly
// @Last modified time: 2018-03-17 04:56:30 pm
// @License: MIT

[grid-name] {
  > [grid-header] {
    grid-area: header;
  }

  > [grid-main] {
    grid-area: main;
  }

  > [grid-aside] {
    grid-area: aside;
  }

  > [grid-footer] {
    grid-area: footer;
  }
}
/*
 * 写法应该遵循从上至下，从左至右原则，
 * 从上至下使用 [] 将区域名字括起来，区域名字使用空格相隔
 * 从左至右使用 () 将区域名字括起来，区域名字使用空格相隔
 */

[grid-name="[header main]"] {
  /**
   *   ----------
   *   | header |
   *   ----------
   *   | main   |
   *   ----------
   */
  grid-template-areas: "header" "main";
  grid-template-rows : $header auto;
}

[grid-name="[main footer]"] {
  /**
   *   ------------
   *   | main     |
   *   ------------
   *   | footer   |
*   ------------
   */
  grid-template-areas: "main" "footer";
  grid-template-rows : auto $footer;
}

[grid-name="[header main footer]"] {
  /**
   *   ----------
   *   | header |
   *   ----------
   *   | main   |
   *   ----------
   *   | footer |
   *   ----------
   */
  grid-template-areas: "header" "main" "footer";
  grid-template-rows : $header auto $footer;
}

[grid-name="(aside main)"] {
  /**
   *   ----------------
   *   | aside | main |
   *   ----------------
   */
  grid-template-areas  : "aside main" "aside main";
  grid-template-columns: $aside auto;
}

[grid-name="[header (aside main)]"] {
  /**
   *   ----------------
   *   | header       |
   *   ----------------
   *   | aside | main |
   *   ----------------
   */
  grid-template-areas  : "header header" "aside main";
  grid-template-rows   : $header auto;
  grid-template-columns: $aside auto;
}

[grid-name="[header (aside [main footer])]"] {
  /**
   *   ------------------
   *   | header         |
   *   ------------------
   *   |       | main   |
   *   | aside |--------|
   *   |       | footer |
   *   ------------------
   */
  grid-template-areas  : "header header" "aside main" "aside footer";
  grid-template-rows   : $header auto $footer;
  grid-template-columns: $aside auto;
}

[grid-name="(aside [header main])"] {
  /**
   *   ------------------
   *   |       | header |
   *   | aside |--------|
   *   |       | main   |
   *   ------------------
   */
  grid-template-areas  : "aside header" "aside main";
  grid-template-rows   : $header auto;
  grid-template-columns: $aside auto;
}

[grid-name="(aside [header main footer])"] {
  /**
   *   ------------------
   *   |       | header |
   *   |       |--------|
   *   | asdie | main   |
   *   |       |--------|
   *   |       | footer |
   *   ------------------
   */
  grid-template-areas  : "aside header" "aside main" "aside footer";
  grid-template-rows   : $header auto $footer;
  grid-template-columns: $aside auto;
}

[grid-name="[header (aside main) footer]"] {
  /**
   *   ----------------
   *   | header       |
   *   |--------------|
   *   | asdie | main |
   *   |--------------|
   *   | footer       |
   *   ----------------
   */
  grid-template-areas  : "header header" "aside main" "footer footer";
  grid-template-rows   : $header auto $footer;
  grid-template-columns: $aside auto;
}

[grid-name="[(aside [header main]) footer]"] {
  /**
   *   ------------------
   *   |       | header |
   *   | asdie |--------|
   *   |       | main   |
   *   |----------------|
   *   | footer         |
   *   ------------------
   */
  grid-template-areas  : "aside header" "aside main" "footer footer";
  grid-template-rows   : $header auto $footer;
  grid-template-columns: $aside auto;
}

[grid-name="[(asdie main) footer]"] {
  /*
   *   ----------------
   *   | asdie | main |
   *   |--------------|
   *   | footer       |
   *   ----------------
   */
  grid-template-areas  : "aside main" "aside main" "footer footer";
  grid-template-rows   : auto auto $footer;
  grid-template-columns: $aside auto;
}